<template>
  <div class="week-box">
    <el-button @click="prevWeekHandle" :disabled="isDisabled">
      <img
        class="icon"
        src="@/assets/classSchedule/arrow-left-icon.png"
        alt=""
      />
    </el-button>
    <el-date-picker
      v-model="baseForm.date"
      type="week"
      :format="baseForm.startTime + ' 至 ' + baseForm.endTime"
      placeholder="请选择周"
      @change="weekChange"
      :disabled="isDisabled"
    />
    <el-button @click="nextWeekHandle" :disabled="isDisabled">
      <img
        class="icon"
        src="@/assets/classSchedule/arrow-right-icon.png"
        alt=""
      />
    </el-button>
    <el-button
      class="currentWeek"
      @click="backCurrentWeekHandle"
      :disabled="isDisabled"
      >回到本周</el-button
    >
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import updateLocale from 'dayjs/plugin/updateLocale'

dayjs.extend(updateLocale)
dayjs.updateLocale('en', {
  weekStart: 1
})
export type BaseForm = {
  date: string
  startTime: string
  endTime: string
  week: number
  year: number
  weekDates: string[] // 添加可选的整周日期数组
}
const baseForm = reactive({
  date: dayjs().format('YYYY-MM-DD'),
  startTime: '',
  endTime: '',
  week: 0,
  year: 0,
  weekDates: [] // 初始化整周日期数组
} as BaseForm)

// 布置课程锁死筛选框
const props = defineProps<{
  isArrange: boolean
}>()
const isDisabled = ref<boolean>(props.isArrange)
watch(
  () => props.isArrange,
  (newVal) => {
    isDisabled.value = newVal
  }
)

const Emit = defineEmits<{
  (e: 'weekChangeHandle', data: BaseForm): void
}>()
// 获取整周日期数组的函数
const getWeekDates = (startDate: Date): string[] => {
  const weekDates = []
  const start = new Date(startDate)

  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(start.getTime() + i * 24 * 60 * 60 * 1000)
    weekDates.push(getCurrentTime(currentDate, 0))
  }

  return weekDates
}

// 计算第几周 (ISO周数)
const getWeekNumber = (date: Date): number => {
  const target = new Date(date.valueOf())
  const dayNr = (date.getDay() + 6) % 7 // 将周日(0)转换为6, 周一(1)转换为0
  target.setDate(target.getDate() - dayNr + 3) // 移动到该周的周四
  const firstThursday = target.valueOf()
  target.setMonth(0, 1) // 移动到1月1日
  if (target.getDay() !== 4) {
    target.setMonth(0, 1 + ((4 - target.getDay() + 7) % 7)) // 移动到第一个周四
  }
  return 1 + Math.ceil((firstThursday - target.valueOf()) / 604800000) // 1周=604800000毫秒
}
// 处理展示数据
const weekChange = (value: Date) => {
  const date = new Date(value)
  const y = date.getFullYear()
  const m = date.getMonth()
  const d = date.getDate()
  const weekDay = date.getDay()
  const start = new Date(y, m, d - weekDay + 1)
  const end = new Date(y, m, d - weekDay + 7)

  baseForm.date = getCurrentTime(start, 0)
  baseForm.startTime = getCurrentTime(start, 0)
  baseForm.endTime = getCurrentTime(end, 0)
  baseForm.year = y
  baseForm.week = getWeekNumber(date) // 计算并设置周数
  baseForm.weekDates = getWeekDates(start) // 计算整周日期数组

  Emit('weekChangeHandle', baseForm)
  console.log(baseForm)
}
// 时间戳转为yy-mm-dd
const getCurrentTime = (data: Date, num: number) => {
  const date = new Date(data)
  const Y = date.getFullYear()
  const M =
    date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  const D =
    date.getDate() + num < 10
      ? '0' + (date.getDate() + num)
      : date.getDate() + num
  return Y + '-' + M + '-' + D
}
weekChange(new Date())

// 上一周
const prevWeekHandle = () => {
  const currentStart = new Date(baseForm.startTime)
  const prevWeekStart = new Date(
    currentStart.getTime() - 7 * 24 * 60 * 60 * 1000
  )
  weekChange(prevWeekStart)
}

// 下一周
const nextWeekHandle = () => {
  const currentStart = new Date(baseForm.startTime)
  const nextWeekStart = new Date(
    currentStart.getTime() + 7 * 24 * 60 * 60 * 1000
  )
  weekChange(nextWeekStart)
}

// 回到本周 - 确保显示当前周（从周一到周日）
const backCurrentWeekHandle = () => {
  const today = new Date()
  const weekDay = today.getDay()
  const currentWeekMonday = new Date(
    today.getTime() - (weekDay - 1) * 24 * 60 * 60 * 1000
  )
  weekChange(currentWeekMonday)
}
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  border: none;
  .el-input__prefix {
    display: none;
  }
  .el-input__inner {
    text-align: center;
  }
  .el-input__suffix {
    display: none;
  }
}

.el-button {
  padding-left: 8px;
  padding-right: 8px;
  border: none;
  background-color: #f2f3f5;
  margin-right: 10px;
  margin-left: 10px;
  &:hover {
    opacity: 0.8;
  }
  .icon {
    display: inline-block;
    width: 24px;
  }
}
.currentWeek {
  color: #165dff;
  background-color: transparent;
  margin-left: 0;
  transition: opacity 0.2s;
  &:hover {
    opacity: 0.8;
  }
}
</style>
